<template>
  <el-form ref="form" :model="form" label-width="80px" size="small">
    <el-tabs v-model="activeName">
      <el-tab-pane label="WGS-84坐标" name="first">
        <el-form-item label="经度">
          <el-input v-model="form.lng" @change="handleResolveWgs(form.lng)" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="form.lat" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="form.height" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="笛卡尔空间坐标" name="second">
        <el-form-item label="X">
          <el-input v-model="form.x" @change="handleResolveCar(form.x)" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="Y">
          <el-input v-model="form.y" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="Z">
          <el-input v-model="form.z" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
    <div class="text-right">
      <el-button @click="run" type="primary" size="mini">定位</el-button>
    </div>
  </el-form>
</template>

<script>
import * as Cesium from 'cesium'
import camera from '@/components/dogeo/cesium/camera.js'
import { Cartesian3_to_WGS84 } from '@/components/dogeo/cesium/transform.js'

export default {
  name: 'tool-locate',

  props: {
    viewer: {
      type: Object,
      default () {
        return null
      }
    }
  },

  data () {
    return {
      activeName: 'first',
      form: {
        lng: 116.3905,
        lat: 39.9084,
        height: 100000,
        x: -2211741.6430,
        y: 4457380.1988,
        z: 4134345.3574
      }
    }
  },

  methods: {
    run () {
      if (!this.viewer) {
        return true
      }
      this.location()
    },
    location () {
      this.clear()
      let lng = parseFloat(this.form.lng)
      let lat = parseFloat(this.form.lat)
      let height = parseFloat(this.form.height)
      if (this.activeName === 'second') {
        let point = Cartesian3_to_WGS84(this.form)
        lng = point.lng
        lat = point.lat
        height = point.alt
      }
      camera.flyToPoint(lng, lat, height)
      this.entity = this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(lng, lat),
        // 广告牌
        billboard: {
          image: require('@/assets/images/digital_bg.png')
        }
      })
    },
    handleResolveWgs (value) {
      if (/,/.test(value)) {
        let values = value.split(',')
        if (values[0]) {
          this.form.lng = values[0]
        }
        if (values[1]) {
          this.form.lat = values[1]
        }
        if (values[2]) {
          this.form.height = values[2]
        }
      }
    },
    handleResolveCar (value) {
      if (/,/.test(value)) {
        let values = value.split(',')
        if (values[0]) {
          this.form.x = values[0]
        }
        if (values[1]) {
          this.form.y = values[1]
        }
        if (values[2]) {
          this.form.z = values[2]
        }
      }
    },
    clear () {
      if (this.entity) {
        this.viewer.entities.remove(this.entity)
        this.entity = null
      }
    }
  }
}
</script>